<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>注册页面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/request.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .form-style {
            margin: 10px 20px;
        }

        .el-card__header {
            padding: 0 10px !important;
        }

        .btn-confirm {
            width: 70%;
            margin: 0 auto;
        }

        .box-card {
            color: blue;
            font-size: 25px;
            font-weight: bold;
        }

        .box-card span {
            color: red;
        }

        .el-message-box__btns {
            text-align: left;
        }
    </style>

</head>

<body>
    <div id="app">
        <div class="form-style">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" status-icon>

                <el-form-item prop="name" class="item-style" label="姓名">
                    <el-input v-model="ruleForm.name" placeholder="请输入姓名" style="width: 70%;" size="medium"></el-input>
                </el-form-item>

                <el-form-item prop="phone" label="电话">
                    <el-input v-model="ruleForm.phone" maxlength="11" placeholder="请输入电话号码" style="width: 70%;"
                        size="medium"></el-input>
                </el-form-item>

                <el-form-item prop="speciality" label="专业">
                    <el-radio-group v-model="ruleForm.speciality" @input="getClassNames">
                        <el-radio-button :label=item.idClass v-for="item in this.stuClasses"
                            :key="item.idClass"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item prop="stuClass" label="班级">
                    <el-radio-group v-model="ruleForm.stuClass">
                        <el-radio-button :label=item v-for="item in classNames" :key="item"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="申请科研补助" size="normal">
                    <!-- 申请科研补助 -->
                    <el-switch v-model="apply" active-color="rgb(64, 158, 255)" inactive-color="#cccccc">
                    </el-switch>
                </el-form-item>

                <el-form-item label="" size="normal">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>科研补助具体说明</span>
                        </div>
                        大二前端完成，通过测试，每月<span>400</span>
                        <br>
                        大三前后端完成，通过测试，每月<span>800</span>
                    </el-card>
                </el-form-item>

                <el-form-item class="btn-confirm">
                    <el-button type="primary" @click="submitForm('ruleForm')" style="width: 100%;" round>提交</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    apply: false,
                    stuClasses: [],
                    classNames: [],
                    ruleForm: {
                        name: '',
                        phone: '',
                        speciality: '',
                        stuClass: '',
                    },
                    rules: {
                        name: [
                            { required: true, message: '请输入姓名', trigger: 'blur' },
                        ],
                        phone: [
                            { required: true, message: '请输入电话号码', trigger: 'blur' },
                            { pattern: /^1[3456789]\d{9}$/, message: '电话号格式不正确', trigger: 'blur' }
                        ],
                        speciality: [
                            { required: true, message: '请选择专业', trigger: 'blur' }
                        ],
                        stuClass: [
                            { required: true, message: '请选择班级', trigger: 'blur' }
                        ]
                    }
                }
            },
            mounted() {
                axios({
                    method: 'GET',
                    url: '/register/classes'
                }).then(res => {
                    this.stuClasses = res.data
                    this.ruleForm.speciality = this.stuClasses[0].idClass
                    this.classNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality).studentClass
                    this.ruleForm.stuClass = this.classNames[0]
                })
            },
            methods: {
                getClassNames() {
                    this.classNames = this.stuClasses.find(item => item.idClass == this.ruleForm.speciality).studentClass
                    this.ruleForm.stuClass = this.classNames[0] //选择第一个班级
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            const h = this.$createElement;
                            this.$msgbox({
                                title: '请确认信息',
                                message: h('div', null, [
                                    h('div', { style: 'color: teal' }, `姓名:${this.ruleForm.name}`),
                                    h('div', { style: 'color: teal' }, `电话: ${this.ruleForm.phone}`),
                                    h('div', { style: 'color: teal' }, `专业: ${this.ruleForm.speciality}`),
                                    h('div', { style: 'color: teal' }, `班级: ${this.ruleForm.stuClass}`),
                                    h('div', { style: 'color: teal' }, `申请补助: ${this.apply ? '是' : '否'}`)
                                ]),
                                showCancelButton: true,
                                confirmButtonText: '提交',
                                cancelButtonText: '取消',
                            }).then(() => {
                                axios.post('/load/add', {
                                    phone: this.ruleForm.phone,
                                    name: this.ruleForm.name,
                                    idClass: this.ruleForm.speciality,
                                    studentClass: this.ruleForm.stuClass,
                                    apply: this.apply ? 1 : 0
                                }).then(res => {
                                    if (res.data.code == 1) {
                                        localStorage.setItem("name", this.ruleForm.name)
                                        localStorage.setItem("phone", this.ruleForm.phone)
                                        localStorage.setItem("speciality", this.ruleForm.speciality)
                                        localStorage.setItem("stuClass", this.ruleForm.stuClass)
                                        localStorage.setItem("apply", this.apply)
                                        this.$message({
                                            showClose: true,
                                            message: '注册成功！',
                                            type: 'success'
                                        });
                                        setTimeout(() => {
                                            location.href = './SuccessAdd.html'
                                        }, 1000);
                                    } else if (res.data.code == 0) {
                                        this.$message({
                                            showClose: true,
                                            message: '注册失败！该用户已存在！',
                                            type: 'error'
                                        });
                                    }
                                })
                            }).catch(err => {

                            })
                        } else {
                            this.$message({
                                showClose: true,
                                message: '注册失败！请填写全部信息！',
                                type: 'warning'
                            });
                            return false;
                        }
                    });
                }
            }
        })
    </script>

</body>

</html>